<template>
  <transition name="fade">
    <div v-if="scanningStatus" :class="['global-scan-status', scanningStatus.type]">
      <div class="status-content">
        <el-icon v-if="scanningStatus.type === 'scanning'">
          <Loading /></el-icon>
        <el-icon v-else-if="scanningStatus.type === 'success'">
          <Check /></el-icon>
        <el-icon v-else-if="scanningStatus.type === 'error'">
          <Close /></el-icon>
        <span>{{ scanningStatus.message }}</span>
        <el-button type="text" size="small" class="close-btn" @click="closeStatus">×</el-button>
      </div>
      
      <!-- 显示扫码产品信息（如果有） -->
      <div v-if="currentProductInfo" class="product-info">
        <p><strong>产品名称：</strong>{{ currentProductInfo.productName }}</p>
        <p><strong>产品状态：</strong>
          <el-tag v-if="currentProductInfo.productState === 1" type="success">成品</el-tag>
          <el-tag v-else-if="currentProductInfo.productState === 2" type="warning">半成品</el-tag>
          <el-tag v-else-if="currentProductInfo.productState === 3" type="danger">残次品</el-tag>
          <span v-else>未知</span>
        </p>
        <p><strong>扫描码：</strong>{{ currentScanCode }}</p>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Loading, Check, Close } from '@element-plus/icons-vue';
import globalScanner from '@/utils/globalScanner';

// 扫描状态提示
const scanningStatus = ref<{ type: string; message: string } | null>(null);
// 当前产品信息
const currentProductInfo = ref<any>(null);
// 当前扫描码
const currentScanCode = ref('');

// 显示扫描状态
const showScanningStatus = (type: string, message: string, productInfo?: any, scanCode?: string) => {
  scanningStatus.value = {
    type: type,
    message: message
  };
  
  // 更新产品信息
  currentProductInfo.value = productInfo;
  currentScanCode.value = scanCode || '';
  
  // 3秒后清除状态提示
  setTimeout(() => {
    scanningStatus.value = null;
    currentProductInfo.value = null;
    currentScanCode.value = '';
  }, 3000);
};

// 自定义扫码回调函数
const scanStatusHandler = (code: string) => {
  showScanningStatus('scanning', `扫描到: ${code}`);
  
  // 延迟获取产品信息，确保全局扫码服务已经处理完数据
  setTimeout(() => {
    const productInfo = globalScanner.getProductInfoByScanCode(code);
    if (productInfo) {
      showScanningStatus('success', '扫码成功，正在跳转...', productInfo, code);
    }
  }, 100);
};

// 关闭状态提示
const closeStatus = () => {
  scanningStatus.value = null;
  currentProductInfo.value = null;
  currentScanCode.value = '';
};

// 注册自定义扫码回调
globalScanner.addCallback(scanStatusHandler);
</script>

<style scoped>
.global-scan-status {
  position: fixed;
  top: 50px;
  right: 20px;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 4px;
  z-index: 9999;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-width: 250px;
}

.status-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.status-content span {
  flex: 1;
  margin: 0 8px;
}

.product-info {
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  font-size: 12px;
  color: #666;
}

.product-info p {
  margin: 4px 0;
}

.close-btn {
  padding: 0;
  min-width: auto;
  width: 20px;
  height: 20px;
  line-height: 1;
  color: #999;
}

.close-btn:hover {
  color: #666;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 不同状态的样式 */
.global-scan-status.scanning {
  color: #1677ff;
  background-color: #e6f4ff;
}

.global-scan-status.success {
  color: #52c41a;
  background-color: #f6ffed;
}

.global-scan-status.error {
  color: #ff4d4f;
  background-color: #fff2f0;
}
</style>